<template>
  <div>
    <scroller lock-x scrollbar-y use-pullup height="-46" use-pulldown @on-pullup-loading="loadMore"
              @on-pulldown-loading="refresh" v-model="status" ref="scroller">
      <div>
        <ul class="tax" v-for="item in mailList">
          <li>
            <icon type="waiting"></icon>
            {{item.sq_helptime}}
            <span class="fr szxx">12345信箱</span>
          </li>
          <li>
            <router-link :to="{path: '/12345/details/' + item.model_id}">
              <i class="fl text">标题：</i>
              <span class="fl space">{{item.sq_title}}</span>
            </router-link>
          </li>
          <li>
            <i class="fl text">状态：</i>
            <span class="fl">{{item.sq_deal}}</span>
          </li>
        </ul>
      </div>
      <!--pullup slot-->
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up"
           style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
        <span v-show="status.pullupStatus === 'default'"></span>
        <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'"
              :class="{'rotate': status.pullupStatus === 'up'}">
          <spinner type="bubbles"></spinner>
        </span>
        <span v-show="status.pullupStatus === 'loading'"><spinner type="bubbles"></spinner></span>
      </div>
    </scroller>
  </div>
</template>

<script>
  import Scroller from 'vux/src/components/scroller/index'
  import Spinner from 'vux/src/components/spinner/index'
  import Icon from 'vux/src/components/icon/index'

  export default {
    components: {
      Scroller,
      Spinner,
      Icon
    },
    // watch: {
    //   $router: 'this.$vux.loading.hide'
    // },
    methods: {
      firstIn () {
        this.$vux.loading.show({
          text: 'Loading'
        })
        let param = {
          page_size: 15,
          cur_page: 1,
          sq_phone: this.sq_phone
        }
        let url = 'https://ydt.xy12345.cn/edot/api/app12345Mail/listMail'
        this.$axios.post(url, this.$qs.stringify(param)).then(response => {
          this.mailList = response.data.data.showlist
          this.$vux.loading.hide()
        })
      },
      loadMore () {
        setTimeout(() => {
          this.pageNo += 1
          let param = {
            page_size: 15,
            cur_page: this.pageNo,
            sq_phone: this.sq_phone
          }
          let url = 'https://ydt.xy12345.cn/edot/api/app12345Mail/listMail'
          this.$axios.post(url, this.$qs.stringify(param)).then(response => {
            let json = response.data.data.showlist
            for (var i in json) {
              this.mailList.push(json[i])
            }
          })
          setTimeout(() => {
            this.$refs.scroller.donePullup()
          }, 10)
        }, 2000)
      },
      refresh () {
        this.$vux.loading.show({
          text: 'Loading'
        })
        setTimeout(() => {
          let param = {
            page_size: 15,
            cur_page: 1,
            sq_phone: this.sq_phone
          }
          let url = 'http://ydt.xy12345.cn/edot/api/app12345Mail/listMail'
          this.$axios.post(url, this.$qs.stringify(param)).then(response => {
            this.mailList = response.data.data.showlist
            this.$vux.loading.hide()
          })
          this.$nextTick(() => {
            setTimeout(() => {
              this.$refs.scroller.donePulldown()
              this.pullupEnabled && this.$refs.scroller.enablePullup()
            }, 10)
          })
        }, 2000)
      }
    },
    data () {
      return {
        pageNo: 1,
        sq_phone: JSON.parse(localStorage.user).phoneNo,
        mailList: [],
        pullupEnabled: true,
        status: {
          pullupStatus: 'default',
          pulldownStatus: 'default'
        }
      }
    },
    mounted () {
      this.firstIn()
    }
  }
</script>
<style lang="less" scoped>
  .box2-wrap {
    /*height: 300px;*/
    overflow: hidden;
  }

  .rotate {
    display: inline-block;
    transform: rotate(-180deg);
  }

  .pullup-arrow {
    transition: all linear 0.2s;
    color: #666;
    font-size: 25px;
  }

  .m-t-20 {
    margin-top: 20px;
  }

  .tax {
    margin: 0 auto;
    border-radius: 6px;
    width: 94vw;
    border: solid 1px #ddd;
    background: #FFF;
    margin-top: 3vw;
    overflow: hidden;
  }

  .text {
    font-style: normal;
  }

  .tax li {
    height: 10vw;
    line-height: 10vw;
    padding: 0 3vw;
  }

  .tax li:first-child {
    background-color: #eee;
  }

  .szxx {
    color: #639f91;
  }

  .tax li:nth-child(2) {
    border-bottom: solid 1px #eee;
  }

  .tax li a{
    width: 100%;
    display: inline-block;
    overflow: hidden;
    color: #2b2b2b;
  }

  a:visited{
    color: #2b2b2b;
  }

  .space{
    width: 70vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tax ol {
    color: #666;
    padding: 7px 10px 5px 10px;
    background: #eee;
    border-bottom: solid 1px #ddd;
  }

  .tax ol i {
    padding-right: 5px;
  }

  .tax ol span {
    color: #639f91;
  }

  .tax p span {
    color: #666;
    width: 75%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tax p em {
    font-style: normal;
  }

  .tax p i {
    padding-right: 0;
    padding-left: 5px;
    font-size: 24px;
    color: #999;
  }

  .taxBorder {
    border-bottom: solid 1px #eee;
  }

  .taxBorder01 {
    border: solid 1px #ddd;
  }

  .taxBorder02 {
    border: solid 1px #30abf3;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }
</style>
